<template>
  <div>
    <div id="symptom">
      <div id="symptom_title">
        <div id="symptom_title1">感染冠状病毒症状</div>
        <div id="symptom_title2">Symptoms Of Coronavirus</div>
      </div>
      <div id="symptom_main">
        <div class="symptom_mainer">
          <div class="symptom_mainer1">
            <div class="s_img">
              <div class="sss">
                <i id="s_i1"></i>
              </div>
            </div>
            <div class="zhong">头痛</div>
            <div class="ying">Headache</div>
          </div>
          <div class="symptom_mainer1">
            <div class="s_img">
              <div class="sss">
                <i id="s_i2"></i>
              </div>
            </div>
            <div class="zhong">高烧</div>
            <div class="ying">High Fever</div>
          </div>
          <div class="symptom_mainer1">
            <div class="s_img">
              <div class="sss">
                <i id="s_i3"></i>
              </div>
            </div>
            <div class="zhong">干咳</div>
            <div class="ying">Dry Cough</div>
          </div>
        </div>
        <div class="symptom_mainer">
          <div class="symptom_mainer1">
            <div class="s_img">
              <div class="sss">
                <i id="s_i4"></i>
              </div>
            </div>
            <div class="zhong">呼吸急促</div>
            <div class="ying">Shortness Of Breath</div>
          </div>
          <div class="symptom_mainer1">
            <div class="s_img">
              <div class="sss">
                <i id="s_i5"></i>
              </div>
            </div>
            <div class="zhong">喉咙痛</div>
            <div class="ying">Sore Throat</div>
          </div>
          <div class="symptom_mainer1">
            <div class="s_img">
              <div class="sss">
                <i id="s_i6"></i>
              </div>
            </div>
            <div class="zhong">全身疼痛</div>
            <div class="ying">Aches And Pains</div>
          </div>
        </div>
      </div>
    </div>
    <br />
    <div id="way">
      <!-- <div class="img1">
          <img src="http://v.bootstrapmb.com/2020/6/jumb28116/assets/img/mini-white-shape.png">
        </div> -->
      <div class="title">
        <div id="Spreads">Spreads</div>
        <div id="Spreads_title">冠状病毒如何传播？</div>
      </div>
      <el-divider content-position="center"></el-divider>
      <div id="main">
        <div class="mainer">
          <div class="mainer_img">
            <img
              src="http://v.bootstrapmb.com/2020/6/jumb28116/assets/img/spread-icon-1.png"
              width="60px"
              height="40px"
            />
          </div>
          <div>
            <div class="mainer_down1">接触传播</div>
            <div class="mainer_down2">
              病人所携带的病菌有可能沉积在物品或手表面，可以传播到鼻腔、口腔和眼结膜而导致严重的感染。
            </div>
          </div>
          <br />
          <br />
        </div>
        <div class="mainer">
          <div class="mainer_img">
            <img
              src="http://v.bootstrapmb.com/2020/6/jumb28116/assets/img/spread-icon-3.png"
              width="60px"
              height="40px"
            />
          </div>
          <div>
            <div class="mainer_down1">气溶胶传播</div>
            <div class="mainer_down2">
              打喷嚏之后所出现的飞沫混合在空气当中形成气溶胶，被其他人吸入之后导致感染。
            </div>
            <br />
            <br />
          </div>
        </div>
        <div class="mainer">
          <div class="mainer_img">
            <img
              src="http://v.bootstrapmb.com/2020/6/jumb28116/assets/img/spread-icon-2.png"
              width="60px"
              height="40px"
            />
          </div>
          <div>
            <div class="mainer_down1">直接传播</div>
            <div class="mainer_down2">
              病人通过打喷嚏、咳嗽所飞出的飞沫进行传播，所以人与人的距离最好保持在1m以上，才可以防止直接传播。
            </div>
            <br />
            <br />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
#way {
  height: 600px;
  width: 100%;
  background-color: #ded1f7;
  border-radius: 20px;
}
.img1 {
  position: absolute;
  top: -22px;
  left: 115px;
  opacity: 0.3;
  background-position: 50px 50px;
}
.title {
  width: 565px;
  height: 50px;
  text-align: center;
  margin: 0 auto 90px;
  color: #fff;
  padding-top: 25px;
}
#Spreads {
  font-weight: 600;
  font-size: 20px;
  margin-bottom: 10px;
  font-family: "Broadway";
}
#Spreads_title {
  font-size: 40px;
  font-weight: 500;
  font-family: "华文隶书";
}
#main {
  height: 400px;
  margin: 0 auto;
  text-align: center;
  margin-top: 50px;
}
.mainer {
  background: #fff;
  padding: 40px 53px 45px 50px;
  margin-right: 15px;
  margin-left: 15px;
  text-align: center;
  border-radius: 15px;
  width: 30%;
  /* height: 350px; */
  display: inline-block;
}
.mainer_img {
  display: inline-block;
  width: 100px;
  height: 100px;
  line-height: 100px;
  background: #f2edfb;
  border-radius: 50%;
}
.mainer_img img {
  margin-top: 25px;
}
.mainer_down1 {
  margin-top: 18px;
  font-size: 20px;
  font-family: "华文彩云";
}
.mainer_down2 {
  margin-top: 15px;
  font-size: 15px;
}
#symptom {
  width: 100%;
  height: 700px;
  background: url("http://v.bootstrapmb.com/2020/6/sumj98222/images/sections-bg/symptoms-bg.png");
  border-radius: 20px;
}
#symptom_title {
  width: 565px;
  height: 50px;
  text-align: center;
  margin: 0 auto 90px;
  padding-top: 40px;
}
#symptom_title1 {
  font-size: 40px;
  font-family: "华文隶书";
}
#symptom_title2 {
  font-family: "Berlin Sans FB";
  font-size: 20px;
}
.symptom_main {
  height: 400px;
  margin: 0 auto;
  text-align: center;
  margin-top: 50px;
}
.symptom_mainer {
  width: 90%;
  height: 250px;
  /* background-color: tomato; */
  margin: 0 auto;
  margin-bottom: 20px;
  border-radius: 30px;
  padding-left: 100px;
}
.symptom_mainer1 {
  width: 30%;
  margin-right: 15px;
  text-align: center;
  margin: 0 auto;
  display: inline-block;
}
.sss {
  margin-top: 25px;
}
.s_img {
  border: 2px dotted #353c4c;
  border-radius: 100%;
  height: 120px;
  /* width: 120px; */
  /* margin-left: 175px; */
  margin-top: 20px;
  text-align: center;
}
.s_img:hover {
  border: 2px dotted white;
  background-color: #ff415b;
  border-radius: 100%;
  height: 120px;
  /* width: 120px; */
  /* margin-left: 175px; */
  margin-top: 20px;
  text-align: center;
}
#s_i1 {
  display: inline-block;
  background: url("http://v.bootstrapmb.com/2020/6/sumj98222/images/sprites/sprite-home-v3.png")
    no-repeat;
  background-position: -21px -180px;
  width: 53px;
  height: 60px;
}
#s_i1:hover {
  display: inline-block;
  background: url("http://v.bootstrapmb.com/2020/6/sumj98222/images/sprites/sprite-home-v3.png")
    no-repeat;
  background-position: -21px -370px;
  width: 53px;
  height: 60px;
}
#s_i2 {
  display: inline-block;
  background: url("http://v.bootstrapmb.com/2020/6/sumj98222/images/sprites/sprite-home-v3.png")
    no-repeat;
  background-position: -142px -180px;
  width: 53px;
  height: 60px;
}
#s_i2:hover {
  display: inline-block;
  background: url("http://v.bootstrapmb.com/2020/6/sumj98222/images/sprites/sprite-home-v3.png")
    no-repeat;
  background-position: -142px -370px;
  width: 53px;
  height: 60px;
}
#s_i3 {
  display: inline-block;
  background: url("http://v.bootstrapmb.com/2020/6/sumj98222/images/sprites/sprite-home-v3.png")
    no-repeat;
  background-position: -262px -180px;
  width: 55px;
  height: 60px;
}
#s_i3:hover {
  display: inline-block;
  background: url("http://v.bootstrapmb.com/2020/6/sumj98222/images/sprites/sprite-home-v3.png")
    no-repeat;
  background-position: -262px -370px;
  width: 53px;
  height: 60px;
}
#s_i4 {
  display: inline-block;
  background: url("http://v.bootstrapmb.com/2020/6/sumj98222/images/sprites/sprite-home-v3.png")
    no-repeat;
  background-position: -25px -275px;
  width: 60px;
  height: 60px;
}
#s_i4:hover {
  display: inline-block;
  background: url("http://v.bootstrapmb.com/2020/6/sumj98222/images/sprites/sprite-home-v3.png")
    no-repeat;
  background-position: -25px -466px;
  width: 60px;
  height: 60px;
}
#s_i5 {
  display: inline-block;
  background: url("http://v.bootstrapmb.com/2020/6/sumj98222/images/sprites/sprite-home-v3.png")
    no-repeat;
  background-position: -143px -275px;
  width: 60px;
  height: 60px;
}
#s_i5:hover {
  display: inline-block;
  background: url("http://v.bootstrapmb.com/2020/6/sumj98222/images/sprites/sprite-home-v3.png")
    no-repeat;
  background-position: -143px -466px;
  width: 60px;
  height: 60px;
}
#s_i6 {
  display: inline-block;
  background: url("http://v.bootstrapmb.com/2020/6/sumj98222/images/sprites/sprite-home-v3.png")
    no-repeat;
  background-position: -261px -275px;
  width: 60px;
  height: 60px;
}
#s_i6:hover {
  display: inline-block;
  background: url("http://v.bootstrapmb.com/2020/6/sumj98222/images/sprites/sprite-home-v3.png")
    no-repeat;
  background-position: -261px -466px;
  width: 60px;
  height: 60px;
}
.zhong {
  margin-top: 20px;
  font-size: 25px;
  margin-bottom: 10px;
  font-family: "华文彩云";
}
.zhong:hover {
  color: #ff415b;
  margin-top: 20px;
  font-size: 25px;
  margin-bottom: 10px;
  font-family: "华文琥珀";
}
.ying {
  font-size: 20px;
  font-family: "Agency FB";
}
</style>